<template>
  <div id="map-container"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import Event from "./common/Event.js";

export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    onMapClick(e) {
      console.log(e);
    },
    init() {
      let that = this;

      this.map = new Map({
        target: "map-container",
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [113.31, 23.08],
          zoom: 11
        })
      });

      this.map.on("click", this.onMapClick);

      Event.$on("on-sent-gzcenter", function(data) {
        let view = that.map.getView()
        view.setCenter(data);
        view.setZoom(11);
      });
    }
  }
};
</script>

<style>
#map-container {
  width: 100vw;
  height: 93.5vh;
}
</style>